<template>
  <div class="car-box">
    <div class="car-content">
      <div class="title">停车管理</div>
      <!--echarts图-->
      <div id="main-car"></div>
      <div class="car-legend">
        <div><span></span><i>机动车</i><b>{{jCar}}%</b></div>
        <div><span></span><i>非机动车</i><b>{{nCar}}%</b></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'stopCar',
  data () {
    return {
      chart: '',
      jCar: 66.6,
      nCar: 29.7
    }
  },
  props: {

    option: {
      type: Object,
      default () {
        return {
          // title: {
          //   text: '停车管理',
          //   textStyle: {
          //     color: '#fff',
          //     fontSize: 12,
          //     fontWeight: 'normal'
          //   },
          // },
          legend: {
            orient: 'vertical',
            x: 'left',
            selectedMode: false,
            top: '40px',
            left: '20px',
            right: '20px',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              selectedMode: 'single',
              hoverAnimation: false,
              radius: ['15%', '30%'],
              label: {
                normal: {
                  position: 'inner'
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: 0,
                  itemStyle: {
                    color: '#082E4A'
                  }
                },
                {
                  value: 0,
                  itemStyle: {
                    color: '#00A5ED'
                  }
                }
              ],
              center: ['83%', '50%']
            },
            {
              type: 'pie',
              radius: ['55%', '70%'],
              labelLine: {
                normal: {
                  show: false
                }
              },
              hoverAnimation: false,
              center: ['83%', '50%'],
              label: {
                normal: {
                  backgroundColor: '#eee',
                  borderColor: '#fff',
                  borderRadius: 4,
                  rich: {
                    a: {
                      color: '#999',
                      lineHeight: 22,
                      align: 'center'
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      height: 0
                    },
                    b: {
                      fontSize: 16,
                      lineHeight: 33
                    },
                    per: {
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [2, 4],
                      borderRadius: 2
                    }
                  }
                }
              },
              data: [
                {
                  value: 0,
                  itemStyle: {
                    color: '#EBF4F7'
                  }
                },
                {
                  value: 0,
                  itemStyle: {
                    color: '#F6511D'
                  }
                }
              ]
            }
          ]
        }
      }
    }
  },
  mounted () {
    this.getChart()
  },
  methods: {
    getChart () {
      let temp = this.option
      temp.series[0].data[0].value = this.jCar
      temp.series[0].data[1].value = 100 - this.jCar
      temp.series[1].data[0].value = this.nCar
      temp.series[1].data[1].value = 100 - this.nCar
      this.chart = this.$echarts.init(document.getElementById('main-car'))
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style scoped>
  .title{
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top:18px;
    left: 20px;
    z-index: 999;
  }
  .car-box {
    width: 100%;
    margin-bottom: 10px;
  }

  .car-content {
    position: relative;
    width: 100%;
    padding: 13px;
    background: rgba(43, 54, 72, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
  }

  #main-car {
    height: 100px;
  }

  .car-legend {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 7%;
    color: #fff;
  }

  .car-legend div:nth-of-type(1) span {
    background: #F6511D;
  }

  .car-legend div:nth-of-type(2) span {
    background: #00A5ED;
  }

  .car-legend span {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 8px;
    height: 8px;
    float: left;
    margin-right: 9px;
  }

  .car-legend i {
    font-style: normal;
    width: 40%;
    opacity: 0.8;
    font-size: 12px;
  }

  .car-legend b {
    float: right;
    font-size: 18px;
    margin-left: 10px;
    font-weight: normal;
    opacity: 0.8;
  }

  .car-legend div {
    width: 100%;
    line-height: 10px;
    color: #fff;
    margin-bottom: 20px;

  }
</style>
